<template>
  <!--      添加考试试题弹窗-->
  <el-drawer size="650px" :with-header="false" :append-to-body="true" :visible.sync="addExamItemDrawer">
    <div class="right-container">
      <div class="container-header">
        <div style="font-size: 14px">添加试题</div>
        <div @click="handleAddExamItemClose">
          <i class="el-icon-close" style="font-size: 18px"></i>
        </div>
      </div>
      <div class="container-content background-color-grey padding-10">
        <div class="background-color-white padding-10">
          <el-form :model="addExamItem" :rules="addExamItemRule" ref="addExamItem" label-width="80px">

            <el-form-item label="题目" prop="name">
              <el-input v-model="addExamItem.name" type="textarea" placeholder="请输入题目"></el-input>
            </el-form-item>
            <el-form-item label="选项" prop="option">
              <!-- 选项 A，B，C，D，后边有个输入框，输入框的值是选项的内容，再后边有个单选框，单选框的值是是否正确答案 -->
              <div class="flex-cloumn">
                <div class="flex justify-between align-center margin-top-sm">
                  <span>A、</span>
                  <el-input class="flex-1" v-model="addExamItem.a" placeholder="请输入内容"></el-input>
                  <!-- 使用div画一个单选框，选中里边打一个对号 -->
                  <div class=" margin-lr-sm cursor-pointer" @click="changeAns('a')">
                    <div class="radio-check" v-if="addExamItem.ans.indexOf('a')!=-1">√</div>
                    <div class="radio-no-check" v-else></div>
                  </div>

                </div>
                <div class="flex justify-between align-center margin-top-sm">
                  <span>B、</span>
                  <el-input class="flex-1" v-model="addExamItem.b" placeholder="请输入内容"></el-input>
                  <div class=" margin-lr-sm cursor-pointer" @click="changeAns('b')">
                    <div class="radio-check" v-if="addExamItem.ans.indexOf('b')!=-1">√</div>
                    <div class="radio-no-check" v-else></div>
                  </div>
                </div>
                <div class="flex justify-between align-center margin-top-sm">
                  <span>C、</span>
                  <el-input class="flex-1" v-model="addExamItem.c" placeholder="请输入内容"></el-input>
                  <div class=" margin-lr-sm cursor-pointer" @click="changeAns('c')">
                    <div class="radio-check" v-if="addExamItem.ans.indexOf('c')!=-1">√</div>
                    <div class="radio-no-check" v-else></div>
                  </div>
                </div>
                <div class="flex justify-between align-center margin-top-sm">
                  <span>D、</span>
                  <el-input class="flex-1" v-model="addExamItem.d" placeholder="请输入内容"></el-input>
                  <div class=" margin-lr-sm cursor-pointer" @click="changeAns('d')">
                    <div class="radio-check" v-if="addExamItem.ans.indexOf('d')!=-1">√</div>
                    <div class="radio-no-check" v-else></div>
                  </div>
                </div>

              </div>

            </el-form-item>
            <el-form-item label="排序" prop="sort">
              <div class="flex">
                <el-input style="width: 100px" v-model="addExamItem.sort" placeholder="排序"></el-input>
                <div class="margin-left-sm text-gray">数字越大，排列靠前</div>
              </div>
            </el-form-item>
          </el-form>

        </div>
      </div>
      <div class="flex justify-center padding-10">
        <el-button type="primary" @click="addExamItemSubmit">保存</el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script>
export default {
  name: 'exam-item-add-or-update',
  components: {
  },
  data() {
    return {
      sort: 1,
      addFlag: true,
      configForm: {},

      addExamItemDrawer: false,

      addExamItem: {
        name: '',
        a: '',
        b: '',
        c: '',
        d: '',
        ans: '',
        examId: "",
        sort: 1,
      },
      addExamItemRule: {
        name: [
          { required: true, message: '题目不能为空', trigger: 'blur' }
        ],
        a: [
          { required: true, message: '选项A不能为空', trigger: 'blur' }
        ],
        b: [
          { required: true, message: '选项B不能为空', trigger: 'blur' }
        ],
        c: [
          { required: true, message: '选项C不能为空', trigger: 'blur' }
        ],
        d: [
          { required: true, message: '选项D不能为空', trigger: 'blur' }
        ],
        ans: [
          { required: true, message: '答案不能为空', trigger: 'blur' }
        ],
      }
    }
  },
  mounted() {
  },
  created() {
  },
  methods: {
    changeAns(ans){
      //ans用逗号分割
      let currentAns =  this.addExamItem.ans.split(",")
      //判断ans是否在currentAns中，如果在，移除，不在，添加
      if (currentAns.includes(ans)) {
        currentAns = currentAns.filter(item => item !== ans)
      } else {
        currentAns.push(ans)
      }
      let options = ["a","b","c","d"]
      //将currentAns按照options顺序排序，重新拼接字符串
      currentAns = options.filter(item => currentAns.includes(item)).join(",")
      this.addExamItem.ans = currentAns
      console.log(this.addExamItem.ans)
    },
    addExamItemOpen(item) {
      this.initAddExamItem(item)
      this.addExamItemDrawer = true
    },

    initAddExamItem(item) {
      if (item) {
        this.addExamItem = item;
      } else {
        this.addExamItem = {
          name: '',
          a: '',
          b: '',
          c: '',
          d: '',
          ans: '',
          examId: "",
          sort: this.sort,
        }
      }

    },

    handleAddExamItemClose() {
      this.addExamItemDrawer = false;
      this.initAddExamItem();
    },

    addExamItemSubmit() {
      console.log(this.addExamItem)
      //名称，选项，答案，排序必填
      if (!this.addExamItem.name) {
        this.$message.error('题目不能为空')
        return
      }
      //判断每个选项是否填写
      // if (!this.addExamItem.a || !this.addExamItem.b || !this.addExamItem.c || !this.addExamItem.d) {
      //   this.$message.error('选项不能为空')
      //   return
      // }
      //判断答案是否填写
      if (!this.addExamItem.ans) {
        this.$message.error('答案不能为空')
        return
      }
      //验证答案对应的选项是否有值
      if (this.addExamItem.ans.indexOf('a')!=-1 && !this.addExamItem.a) {
        this.$message.error('选项A不能为空')
        return
      }
      if (this.addExamItem.ans.indexOf('b')!=-1 && !this.addExamItem.b) {
        this.$message.error('选项B不能为空')
        return
      }
      if (this.addExamItem.ans.indexOf('c')!=-1 && !this.addExamItem.c) {
        this.$message.error('选项C不能为空')
        return
      }
      if (this.addExamItem.ans.indexOf('d')!=-1 && !this.addExamItem.d) {
        this.$message.error('选项D不能为空')
        return
      }
      //判断排序是否填写
      if (!this.addExamItem.sort) {
        this.$message.error('排序不能为空')
        return
      }
      if (this.addFlag) {
        //新增
        this.$emit("addExamSure", this.addExamItem);
        console.log(this.addExamItem)

        this.handleAddExamItemClose();
      } else {
        //修改
        ////class/exam/updateItem
        console.log(this.addExamItem)
        //掉接口保存
        this.$http({
          url: this.$http.adornUrl(`class/exam/updateItem`),
          method: 'post',
          data: this.$http.adornData(this.addExamItem, false)
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
            })
            this.$emit('refreshDataList')

            this.handleAddExamItemClose();
          }
        }).catch((err) => {
          console.log(err)
          this.$message({
            message: '操作失败',
            type: 'error',
            duration: 1500,
          })

        })
      }

    },

    init(sort, item) {
      console.log(sort, item)
      if (!item) {
        this.sort = sort
      } else {
        //获取数据
        this.sort = item.sort;
        this.addFlag = false;
      }
      this.addExamItemOpen(item)

    }
  }
}
</script>
<style>
.right-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.container-header {
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px
}

.container-content {
  flex: 1;
}


.flex-container {
  display: flex;
  justify-content: space-between;
  /* 根据需要调整 */
}

.flex-item {
  flex: 1;
  /* 可以根据需要调整比例 */
  margin: 0 10px;
  /* 添加一些间距 */
}

.left-panel,
.right-panel {
  /* 在这里添加任何特定的样式，比如背景色、边框等 */
}

.el-tabs--border-card>.el-tabs__content {
  padding: 10px 0;
}

.el-radio__original {
  display: none;
}

.addExamCard>.el-card__body {
  padding: 0px;
}
</style>